<%--
  Created by IntelliJ IDEA.
  User: yangtao
  Date: 2017/6/2
  Time: 11:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="<%=path%>/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="<%=path%>/css/global.css?v=1">
    <link rel="stylesheet" href="<%=path%>/plugins/adminLte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="<%=path %>/plugins/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <script type="text/javascript" src="<%=path %>/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/core/helper.js"></script>
    <script src="<%=path%>/plugins/layui/layui.js"></script>
</head>
<body>
<div class="box box-primary">
    <div class="box-frame">
        <div class="tree" style="margin-top:20px;width:20%;border: 1px solid #ddd;display:inline-block">
            <ul id="types"></ul>
        </div>
        <div style="display:inline-block;width:75%;vertical-align: top;padding-left:20px">
            <button style="float: right" class="layui-btn layui-btn-primary layui-btn-mini" onclick="clearCache()">
                清空缓存
            </button>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>编辑资源类型</legend>
            </fieldset>
            <form id="form" class="layui-form layui-form-pane" action="">
                <input type="hidden" name="type_id" id="type_id"/>
                <input type="hidden" name="parent_codes" id="parent_codes"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">上级分类</label>
                    <div class="layui-input-inline" style="float:left;margin-right:1px;">
                        <select name="parent_code" id="parent_code" lay-filter="parent_code">
                            <option value="-1" selected="selected">无</option>
                            <c:forEach var="root" items="${roots}">
                                <option value="${root.type_code}">${root.type_name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类编码</label>
                    <div class="layui-input-block">
                        <input name="type_code" id="type_code" lay-verify="classifiedCoding" placeholder="请输入英文分类编码"
                               autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input name="type_name" id="type_name" lay-verify="type_name" placeholder="请输入分类名称"
                               autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">条目范围</label>
                    <div class="layui-input-inline">
                        <input name="minConut" id="minConut" lay-verify="minConut" class="layui-input"
                               placeholder="最小条目">
                    </div>
                    <div class="layui-input-inline">
                        <input name="maxConut" id="maxConut" lay-verify="maxConut" class="layui-input"
                               placeholder="最大条目">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序编码</label>
                    <div class="layui-input-block">
                        <input name="sortEncoding" id="sortEncoding" lay-verify="sortEncoding" placeholder="请输入排序编码"
                               autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <input name="description" id="description" lay-verify="description" placeholder="请输入描述"
                               autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>

                <div id="perms">
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">添加子节点自定义属性&nbsp;&nbsp;【添加子节点自定义属性后，所有子节点将拥有该属性】
                    </label>

                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">共有属性</li>
                            <li>私有属性</li>
                            <li>资源公有属性</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div style="background: #FFFFFF;padding-top: 10px;padding-left: 10px;padding-right: 10px">
                                    <button type="button" onclick="selectCustomType('CUSTOM_PROPERTY')"
                                            class="layui-btn layui-btn-mini">
                                        添加属性
                                    </button>
                                    <hr style="background: #00acd6">
                                    <div id="customPropertyPerms" class="layui-input-block" style="padding: 10px">

                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div style="background: #FFFFFF;padding-top: 10px;padding-left: 10px;padding-right: 10px">
                                    <button type="button" onclick="selectCustomType('CUSTOM_PROPERTY_PRIVATE')"
                                            class="layui-btn layui-btn-mini">
                                        添加属性
                                    </button>
                                    <hr style="background: #00acd6">
                                    <div id="customPropertyPrivatePerms" class="layui-input-block"
                                         style="padding: 10px">

                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">内容3</div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">选择自定义类型&nbsp;&nbsp;【自定义资源类型表示该资源可选择的几种格式】
                    </label>
                    <div style="background: #FFFFFF;padding-top: 10px;padding-left: 10px;padding-right: 10px">
                        <button type="button" onclick="selectCustomType('CUSTOM_TYPE')"
                                class="layui-btn layui-btn-mini">类型列表
                        </button>
                        <hr style="background: #00acd6">
                        <div id="customTypePerms" class="layui-input-block" style="padding: 10px">

                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-primary" type="button" onclick="clearType()">清&nbsp;空</button>
                    <button id="savebt" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submitComm">新增保存
                    </button>
                    <button class="layui-btn layui-btn-danger" type="button" onclick="deleteType()">删&nbsp;除</button>
                </div>

            </form>
        </div>
    </div>
</div>
<%--suppress JSUnfilteredForInLoop --%>
<script>
    var form;
    layui.use(['form', 'tree', 'laypage', 'layedit', 'laydate', 'element'], function () {
        form = layui.form();
        var layer = layui.layer;
        var laydate = layui.laydate;
        var element = layui.element();
        var isNum = /^[0-9]+$/;
        var regCode = /^[a-zA-Z_0-9]+$/;
        //自定义验证规则
        form.verify({
            classifiedCoding: function (value) {
                if (value.length < 2) {
                    return '分类编码至少得2个字符!';
                }
                if (!regCode.test(value)) {
                    return '分类编码只能是英文，数字，下划线组成！';
                }
            },
            minConut: function (value) {
                if (value && !isNum.test(value)) {
                    return '最小条目必须是数字！';
                }
            },
            maxConut: function (value) {
                if (value && !isNum.test(value)) {
                    return '最大条目必须是数字！';
                }
                var minConut = $("#minConut").val();
                if (minConut && value < minConut) {
                    return '最大条目必须大于最小条目!';
                }
            },
            sortEncoding: function (value) {
                if (value && !isNum.test(value)) {
                    return '排序编码必须是数字！';
                }

            }
        });

        //小区添加提交
        form.on('submit(submitComm)', function (data) {

            var description = $("#description").val();
            var typeName = $("#type_name").val();

            if (typeName.length < 2 && description.length < 2) {
                layer.msg('分类名称或至少描述填写一个，且大于2个字符！', {icon: 5});
                return false;
            }

            postJson("<%=path%>/cms/resource/saveType.x", $('#form').serialize(), function (data) {
                window.location.reload();
            });
            return false;
        });

        form.on('select(parent_code)', function (data) {
            customPropertyAddPerms(data.value);
        });

        layui.tree({
            elem: '#types', //指定元素
            nodes: JSON.parse('${nodes}'),
            click: function (item) { //点击节点回调
                $('#customTypePerms').empty();
                $('#customPropertyPerms').empty();
                $('#customPropertyPrivatePerms').empty();
                $('#parent_code').val(item.parent_code);
                $('#type_code').val(item.type_code).attr('readonly', true);
                $('#type_id').val(item.type_id);
                $('#type_name').val(item.type_name);
                $('#minConut').val(item.minConut);
                $('#maxConut').val(item.maxConut);
                $('#sortEncoding').val(item.sortEncoding);
                $('#description').val(item.description);
                getCustomTypeByIds('CUSTOM_TYPE', item.customContentId);
                getCustomTypeByIds('CUSTOM_PROPERTY', item.customPropertyId);
                getCustomTypeByIds('CUSTOM_PROPERTY_PRIVATE', item.customPropertyPrivateId);
                customPropertyAddPerms(item.parent_code, item.customProperty);
                $('#savebt').html('修改保存');
                form.render('select');
                console.log(item);
            }
        });
    });

    function selectCustomType(type) {
        var title, perms;
        if (type === 'CUSTOM_PROPERTY') {
            title = '选择添加公有属性';
            perms = '?type=CUSTOM_PROPERTY';
        } else if (type === 'CUSTOM_PROPERTY_PRIVATE') {
            title = '选择添加私有属性';
            perms = '?type=CUSTOM_PROPERTY_PRIVATE';
        } else {
            title = '选择添加自定义类型';
            perms = '?type=CUSTOM_TYPE';
        }
        layui.layer.open({
            title: title,
            type: 2,
            offset: 't',
            area: ['800px', '700px'],
            fixed: false, //不固定
            maxmin: true,
            content: '<%=path%>/cms/resource/customTypeList.x' + perms
        })
    }

    function customAddPerms(type, data) {
        var permsView, customId;
        if (type === 'CUSTOM_PROPERTY') {
            permsView = '#customPropertyPerms';
            customId = 'customPropertyId';
        } else if (type === 'CUSTOM_PROPERTY_PRIVATE') {
            permsView = '#customPropertyPrivatePerms';
            customId = 'customPropertyPrivateId';
        } else {
            permsView = '#customTypePerms';
            customId = 'customContentId';
        }
        $(permsView).empty();
        for (var i in data) {
            $(permsView).append(
                '<div>' +
                '<input type="hidden" name="' + customId + '" id="' + customId + '" value="' + data[i].custom_type_id + '"/> ' +
                '<div style="float:left; margin-right: 20px">' +
                '<div>' +
                '自定义分类名称：' + data[i].custom_type_name +
                '</div>' +
                '</div>' +
                '<button type="button" class="permsRemove layui-btn layui-btn-danger layui-btn-mini" ' +
                'onclick="deletePerms(this);">删&nbsp;除</button>' +
                '<button type="button" class="permsRemove layui-btn layui-btn-mini" ' +
                'onclick="seeCustomType(\'' + data[i].custom_type_id + '\');">查&nbsp;看</button>' +
                '<hr>' +
                '</div>'
            );
        }
        form.render();
    }

    function deletePerms(perms) {
        $(perms).parent().remove();
    }

    function seeCustomType(customTypeId) {
        console.log(customTypeId);
        var param = '';
        if (customTypeId !== null && "undefined" !== typeof customTypeId) {
            param += '?customTypeId=' + customTypeId + '&isNotEdit=true';
        }

        layui.layer.open({
            title: '查看自定义类型',
            type: 2,
            area: ['800px', '600px'],
            fixed: false, //不固定
            maxmin: true,
            content: '<%=path%>/cms/resource/addCustomType.x' + param
        })
    }

    function deleteType(param) {
        console.log($('#form').serialize());
        layer.confirm('删除标签时，将连带删除该标签下的所有资源内容，确定要删除？', {
            btn: ['确定', '取消']
        }, function () {
            postJson("<%=path%>/cms/resource/deleteType.x", $('#form').serialize(), function (data) {
                window.location.reload();
            });
        });
    }

    function refreshTree(data) {
        $('#types').empty();
        layui.tree({
            elem: '#types', //指定元素
            nodes: data.data.nodes,
            click: function (item) { //点击节点回调
                $('#customTypePerms').empty();
                $('#customPropertyPerms').empty();
                $('#customPropertyPrivatePerms').empty();
                $('#parent_code').val(item.parent_code);
                $('#type_code').val(item.type_code).attr('readonly', true);
                $('#type_id').val(item.type_id);
                $('#type_name').val(item.type_name);
                $('#minConut').val(item.minConut);
                $('#maxConut').val(item.maxConut);
                $('#sortEncoding').val(item.sortEncoding);
                $('#description').val(item.description);
                getCustomTypeByIds('CUSTOM_TYPE', item.customContentId);
                getCustomTypeByIds('CUSTOM_PROPERTY', item.customPropertyId);
                getCustomTypeByIds('CUSTOM_PROPERTY_PRIVATE', item.customPropertyPrivateId);
                customPropertyAddPerms(item.parent_code, item.customProperty);
                $('#savebt').html('修改保存');
                form.render('select');
            }
        });
        $('#parent_code option').remove();
        if ("-1" === $('#parent_code').val()) {
            $("#parent_code").append('<option value="-1" selected="selected">无</option>');
        } else {
            $("#parent_code").append('<option value="-1" >无</option>');
        }
        $.each(data.data.roots, function (n, item) {
            if (item.type_id === $('#parent_code').val()) {
                $("#parent_code").append("<option value='" + item.type_code + "' selected='selected'>" + item.type_name + "</option>");
            } else {
                $("#parent_code").append("<option value='" + item.type_code + "'>" + item.type_name + "</option>");
            }
        });
        layer.alert('操作成功！', {icon: 6});
        clearType();
    }

    function getCustomTypeByIds(type, customContentId) {
        if (customContentId && "undefined" !== typeof customContentId) {
            var param = {};
            param.isPage = false;
            param.customTypeId = customContentId;
            postJson("<%=path%>/cms/resource/queryCustomTypeList.x", $.param(param), function (data) {
                customAddPerms(type, data.data.list);
            });
        }
    }


    function customPropertyAddPerms(parentCode, customPropertys) {
        $('#perms').empty();
        <c:forEach var="row" items="${roots}">
        if (parentCode === '${row.type_code}' && ${not empty row.customPropertyId}) {
            var param = {};
            param.isPage = false;
            param.isAnalysisCustomContent = true;
            param.customTypeId = '${row.customPropertyId}';
            postJson("<%=path%>/cms/resource/queryCustomTypeList.x", $.param(param), function (data) {
                var customTypeList = data.data.list;
                for (var i in customTypeList) {
                    var customContents = customTypeList[i].customContents;
                    for (var j in customContents) {
                        var customContent = customContents[j];
                        var dsCustomDescribe;
                        if (customContent && customContent.customType === 'CMS_CUSTOM_SORT') {
                            var sortListView = '';
                            if (customContent.customDescribe  && "undefined" !== typeof customContent.customDescribe) {
                                dsCustomDescribe = ' value = "' + customContent.customDescribe + '"';
                            } else {
                                dsCustomDescribe = ' value = "" ';
                            }

                            if (customContent.spinnerMap) {
                                for (var key in customContent.spinnerMap) {
                                    var selected = '';
                                    for (var k in customPropertys) {
                                        if (customPropertys[k].customKey === customContent.customKey &&
                                            customPropertys[k].customValue === key) {
                                            selected = ' selected';
                                            break;
                                        }
                                    }
                                    sortListView += '<option value="' + key + '"' + selected + '>' + customContent.spinnerMap[key] + '</option>'
                                }
                            } else {
                                sortListView = '<option value="-1">无</option>'
                            }

                            $("#perms").append(
                                '<div  class="layui-form-item">' +
                                '<label class="layui-form-label">' + customContent.customName + '</label>' +
                                '<div class="layui-inline">' +
                                '<input type="hidden" name="customPropertyKeys" value ="' + customContent.customKey + '"/>' +
                                '<select name="customPropertyValues">' + sortListView + '</select>' +
                                '<input type="hidden" name="customPropertyDescribes" ' + dsCustomDescribe + '/>' +
                                '</div>' +
                                '</div>'
                            );
                        } else if (customContent) {
                            if (customContent.customDescribe && "undefined" !== typeof customContent.customDescribe) {
                                dsCustomDescribe = ' value = "' + customContent.customDescribe + '"';
                            } else {
                                dsCustomDescribe = ' value = "" ';
                            }

                            var value = '';
                            for (var l in customPropertys) {
                                if (customPropertys[l].customKey === customContent.customKey) {
                                    value = customPropertys[l].customValue;
                                    break;
                                }
                            }

                            $("#perms").append(
                                '<div  class="layui-form-item">' +
                                '<label class="layui-form-label">' + customContent.customName + '</label>' +
                                '<div class="layui-input-block">' +
                                '<input type="hidden" name="customPropertyKeys" value ="' + customContent.customKey + '"/>' +
                                '<input type="hidden" name="customPropertyDescribes" ' + dsCustomDescribe + '/>' +
                                '<input name="customPropertyValues" placeholder="请输入' + customContent.customName + '"' +
                                'autocomplete="off" class="layui-input" type="text" value="' + value + '">' +
                                '</div>' +
                                '</div>'
                            );
                        }
                    }
                }

                form.render();
            });
        }
        </c:forEach>
    }

    function clearType() {
        $('#parent_code').val('-1');
        $('#type_id').val('');
        $('#type_code').val('').attr('readonly', false);
        $('#type_name').val('');
        $('#customTypePerms').empty();
        $('#customPropertyPerms').empty();
        $('#sortEncoding').val('');
        $('#description').val('');
        $('#minConut').val('');
        $('#maxConut').val('');
        $('#perms').empty();
        $("#parent_code option:first").attr("selected", "selected");
        $('#savebt').html('新增保存');
        form.render('select');
    }

    function clearCache() {
        postJson("<%=path%>/cms/resource/clearCache.x", null, function (data) {
            layer.alert('操作成功！', {icon: 6});
        });
    }
</script>

</body>
</html>
